<template>
	<div>
		<div class="top">
			<h2>龙海市建钦节能科技有限公司</h2>
			<ul>
				<li>
					<h3><span>6688</span>万</h3>
					<p>当日</p>
				</li>
				<li>
					<h3><span>58475</span>方</h3>
					<p>本月</p>
				</li>
				<li>
					<h3><span>62.87</span>万方</h3>
					<p>全年</p>
				</li>
			</ul>
		</div>
		<div class="indexContainer">
			<div class="con">
				<div class="conBox">
					<div class="nav">
						<ul>
							<li>
								<image src="/static/index_10.png" />
								<div>工地报单</div>
							</li>
							<li>
								<image src="/static/index_12.png" />
								<div>配合比审核</div>
							</li>
							<li><image src="/static/index_14.png" />
								<div>排号看板</div>
							</li>
							<li><image src="/static/index_16.png" />
								<div>报告审核</div>
							</li>
							<li><image src="/static/index_22.png" />
								<div>原材库存</div>
							</li>
							<li><image src="/static/index_23.png" />
								<div>车辆跟踪</div>
							</li>
							<li><image src="/static/index_24.png" />
								<div>剩退转</div>
							</li>
							<li><image src="/static/index_25.png" />
								<div>添加</div>
							</li>
						</ul>
					</div>
					<div class="list">
						<div class="hd">
							<ul>
								<li :class="{on:nav==0}" @click="nav=0">生产</li>
								<li :class="{on:nav==1}" @click="nav=1">车队</li>
								<li :class="{on:nav==2}" @click="nav=2">原材</li>
								<li :class="{on:nav==3}" @click="nav=3">试验</li>
								<li :class="{on:nav==4}" @click="nav=4">资料</li>

							</ul>
							<div class="side"><a href=""></a></div>
						</div>
						<div class="bd">
							<ul>
								<li>
									<div class="icon"><image src="/static/index_34.png" /></div>
									<p>订货单</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_37.png" /></div>
									<p>生产任务</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_40.png" /></div>
									<p>发货记录</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_43.png" /></div>
									<p>剩退转</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_51.png" /></div>
									<p>生产统计</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_54.png" /></div>
									<p>工地报单</p>
								</li>
							</ul>
							<ul style="display: none;">
								<li>
									<div class="icon"><image src="/static/index_34.png" /></div>
									<p>订货单</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_37.png" /></div>
									<p>生产任务</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_40.png" /></div>
									<p>发货记录</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_43.png" /></div>
									<p>剩退转</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_51.png" /></div>
									<p>生产统计</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_54.png" /></div>
									<p>工地报单</p>
								</li>
							</ul>
							<ul style="display: none;">
								<li>
									<div class="icon"><image src="/static/index_34.png" /></div>
									<p>订货单</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_37.png" /></div>
									<p>生产任务</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_40.png" /></div>
									<p>发货记录</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_43.png" /></div>
									<p>剩退转</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_51.png" /></div>
									<p>生产统计</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_54.png" /></div>
									<p>工地报单</p>
								</li>
							</ul>
							<ul style="display: none;">
								<li>
									<div class="icon"><image src="/static/index_34.png" /></div>
									<p>订货单</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_37.png" /></div>
									<p>生产任务</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_40.png" /></div>
									<p>发货记录</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_43.png" /></div>
									<p>剩退转</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_51.png" /></div>
									<p>生产统计</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_54.png" /></div>
									<p>工地报单</p>
								</li>
							</ul>
							<ul style="display: none;">
								<li>
									<div class="icon"><image src="/static/index_34.png" /></div>
									<p>订货单</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_37.png" /></div>
									<p>生产任务</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_40.png" /></div>
									<p>发货记录</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_43.png" /></div>
									<p>剩退转</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_51.png" /></div>
									<p>生产统计</p>
								</li>
								<li>
									<div class="icon"><image src="/static/index_54.png" /></div>
									<p>工地报单</p>
								</li>
							</ul>
						</div>
					</div>

				</div>
				<div class="conBox" style="display: none;"></div>
				<div class="conBox" style="display: none;"></div>
				<div class="conBox" style="display: none;"></div>
				<div class="conBox" style="display: none;"></div>
			</div>
		</div>
		<!-- <div class="footer">
			<ul>
				<li :class="{on:footer==0}" @click="footer=0">
					<div class="icon">
						<image src="/static/a1.png" />
						<image class="on" src="/static/a6.png" />
					</div>
				</li>
				<li :class="{on:footer==1}" @click="footer=1">
					<div class="icon">
						<image src="/static/a2.png" />
						<image class="on" src="/static/a7.png" />
					</div>
				</li>
				<li :class="{on:footer==2}" @click="footer=2">
					<div class="icon">
						<image src="/static/a3.png" />
						<image class="on" src="/static/a8.png" />
					</div>
				</li>
				<li :class="{on:footer==3}" @click="footer=3">
					<div class="icon">
						<image src="/static/a4.png" />
						<image class="on" src="/static/a9.png" />
					</div>
				</li>
				<li :class="{on:footer==4}" @click="footer=4">
					<div class="icon">
						<image src="/static/a5.png" />
						<image class="on" src="/static/a10.png" />
					</div>
				</li>
			</ul>
		</div> -->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				nav: 0,
				footer: 0
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.top {
		background: url(/static/index_06.png);
		height: 350rpx;
		background-size: 100% 100%;
		padding: 60rpx 45rpx 0;
		box-sizing: border-box;
	}

	.top h2 {
		line-height: 145rpx;
		height: 145rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.top ul {
		overflow: hidden;
		width: 100%;
		overflow: auto;
	}

	.top ul li {
		width: 33%;
		float: left;
		box-sizing: border-box;
		text-align: center;
		border-right: 1rpx solid #fff;
	}

	.top ul li:nth-child(2) {
		width: 34%;
	}

	.top ul li:last-child {
		border-right: 0;
	}

	.top ul li h3 {
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 20rpx;
	}

	.top ul li h3 span {
		font-weight: bold;
		font-size: 36rpx;
		color: #fff;
	}

	.top ul li p {
		font-size: 22rpx;
		color: #fff;
	}

	.indexContainer {
		margin-top: -35rpx;
		width: 100%;
		background: #fff;
		border-radius: 35rpx 35rpx 0 0;
		padding: 50rpx 40rpx 0 40rpx;
		box-sizing: border-box;
	}

	.indexContainer .nav {
		width: 100%;
		overflow: hidden;
	}

	.indexContainer .nav ul {
		overflow: hidden;
	}

	.indexContainer .nav ul li {
		height: 154rpx;
		float: left;
		width: 23.5%;
		margin-right: 2%;
		margin-bottom: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #2678ff;
		color: #fff;
		font-size: 20rpx;
	}

	.indexContainer .nav ul li:nth-child(2n) {
		background-color: #26b5ff;
	}

	.indexContainer .nav ul li:nth-child(4n) {
		margin-right: 0;
	}
	.indexContainer .nav ul li:last-of-type {
		background-color: #c4c4c4;
	}
	.indexContainer .nav ul li image {
		display: block;
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 15rpx;
	}

	.indexContainer .list {
		padding-bottom: 385rpx;
		width: 100%;
	}

	.indexContainer .list .hd {
		position: relative;
		width: 100%;
		height: 60rpx;
		border-bottom: .04rpx solid #e9e9e9;
	}

	.indexContainer .list .hd .side {
		background: url(/static/side_10.png) center center no-repeat;
		position: absolute;
		right: 0;
		height: 100%;
		width: 30rpx;
		background-size: 100% auto;
		top: 0;
	}

	.indexContainer .list .hd .side a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.indexContainer .list .hd ul {
		overflow: hidden;
	}

	.indexContainer .list .hd ul li {
		width: 85rpx;
		font-size: 28rpx;
		color: #8e8e8e;
		text-align: center;
		float: left;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 10rpx;
	}

	.indexContainer .list .hd ul li.on {
		color: #035fff;
		border-bottom: 1px solid #035fff;
	}

	.indexContainer .list .bd {
		width: 100%;
		overflow: hidden;
	}

	.indexContainer .list .bd ul {
		overflow: hidden;
	}

	.indexContainer .list .bd ul li {
		width: 25%;
		float: left;
		margin-top: 30rpx;
	}

	.indexContainer .list .bd ul li .icon {
		width: 100%;
		height: 145rpx;
		position: relative;
	}

	.indexContainer .list .bd ul li .icon image {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		height: 54rpx;
		width: 54rpx;
	}

	.indexContainer .list .bd ul li p {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
</style>